#professors {
    text-align: center; /* 居中所有内部文本和图片 */
    width: 100%; /* 使用全宽以适应不同屏幕 */
    margin: auto; /* 自动边距实现居中 */
}

#people h3 {
    font-style: italic; /* 斜体显示身份 */
    color: #FF6347; /* 身份颜色 */
    font-size: 25px; /* 可以适当保持或调整标题的字体大小 */
	text-align: center; /* 文本居中 */
}

.person {
    display: inline-block;
    width: 18%; /* 调整布局以适应更大的图片 */
    margin: 0.5%; /* 每个人之间的间距 */
    vertical-align: top; /* 顶部对齐 */
    text-align: center; /* 中心对齐图片和文本 */
	min-width: 220px;
}



.person img {
    width: 100%; /* 图片宽度始终为容器宽度的100% */
    aspect-ratio: 22 / 30; /* 设置图片的宽高比为3:4 */
    height: auto; /* 高度自动调整 */
    object-fit: cover; /* 覆盖模式，保持图片的比例 */
}


.person p {
    margin-top: 5px;
    color: white; /* 文本颜色 */
    font-size: 14px; /* 名字的字体大小保持不变 */
    text-align: center; /* 文本居中 */
}

.person .email, .person .role {
    font-size: 15px; /* 缩小身份和电子邮件的字体大小 */
}

/* 媒体查询调整不同屏幕尺寸的字体大小 */
@media (max-width: 800px) {
    .person p {
        font-size: 12px; /* 较小屏幕上的字体大小减小 */
    }
    .person .email, .person .role {
        font-size: 13px;
    } 
	#members h3 {
        font-size: 20px; /* 在较小屏幕上调整标题字体大小 */
    }
}

@media (max-width: 500px) {
    .person p {
        font-size: 10px; /* 更小屏幕上的字体大小更小 */
    }
    .person .email, .person .role {
        font-size: 11px;
    }
	 #members h3 {
        font-size: 18px; /* 在更小屏幕上进一步减小标题字体大小 */
    }
}


/* research图片格式 */
.versican .research-img {
    flex: 1 0 30%;
    height: auto;
    max-width: 40%;
    min-width: 200px;  /* 确保图片有最小宽度，防止太小 */
	margin: 10px auto; 
}
.ploidy .research-img {
    width: 90%; /* 让图片宽度充满其容器宽度，可以调整百分比以适应具体需要 */
    height: auto; /* 设置高度为auto以保持图片的原始比例 */
    display: block; /* 确保图片在新的一行显示 */
    margin: 10px auto; /* 图片上下各有10px的间距，且水平居中 */
}
.cacct .research-img {
    width: 30%; /* 让图片宽度充满其容器宽度，可以调整百分比以适应具体需要 */
    height: auto; /* 设置高度为auto以保持图片的原始比例 */
    display: block; /* 确保图片在新的一行显示 */
    margin: 10px auto; /* 图片上下各有10px的间距，且水平居中 */
}




/* Home自动播放 */
.slider {
  position: relative;
  width: 100%; /* 调整为需要的宽度 */
  overflow: hidden;
}
.slides img {
  width: 100%;
  height: auto;  /* 保持图片的宽高比 */
  max-height: 900px; /* 图片的最大宽度为1024px */
  display: none; /* 初始不显示图片，通过JS控制 */
   margin: 0 auto; /* 添加自动边距以在容器中居中图片 */
}
.slides img:first-child {
  display: block; /* 默认显示第一张图片 */
}
.slider-nav {
  position: absolute;
  top: 10px;  /* 将按钮置于顶部，可根据需要调整 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.nav-btn {
  border: none;
  padding: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
.nav-btn:hover {
  background-color: #ccc;
}



/* 音乐播放按钮 */
.modern-button {
    padding: 12px 24px; /* 增加内边距，使按钮更大，更容易点击 */
    font-size: 16px; /* 设置字体大小 */
    font-family: Arial, sans-serif; /* 设置字体样式 */
    color: white; /* 设置字体颜色 */
    background-color: #007BFF; /* 设置背景色为蓝色 */
    border: none; /* 去除边框 */
    border-radius: 25px; /* 设置边框圆角 */
    cursor: pointer; /* 设置鼠标悬停时的光标形状 */
    transition: background-color 0.3s, transform 0.3s; /* 设置渐变和变形的过渡效果 */
    outline: none; /* 去除焦点时的边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 设置鼠标悬停在按钮上时的样式 */
.modern-button:hover {
    background-color: #0056b3; /* 悬停时改变背景色 */
    transform: scale(1.05); /* 悬停时轻微放大按钮 */
}

/* 设置按钮按下时的样式 */
.modern-button:active {
    background-color: #004085; /* 按下时的背景色 */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); /* 按下时增加阴影效果 */
}